<template>
    <div class="reportForms">
      <div class="inputs">
        <div class="input-item">
            <span class="item-tip">缺陷名称:</span>
            <el-input v-model="fieldInput.defactName" placeholder="请输入缺陷" size="mini" class="item-input"></el-input>
        </div>
        <div class="input-item">
            <span class="item-tip">订单编号:</span>
            <el-input v-model="fieldInput.orderNnumber" placeholder="请输入订单编号" size="mini" class="item-input"></el-input>
        </div>
        <div class="input-item">
            <span class="item-tip">线体:</span>
            <el-select v-model="fieldInput.lineCode" placeholder="请选择线体" size="mini" class="item-input">
                <el-option v-for="item in fieldInput.lineCodes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </div>
        <div class="input-item">
            <span class="item-tip">物料名称:</span>
            <el-input v-model="fieldInput.metailName" placeholder="请输入物料名称" size="mini" class="item-input"></el-input>
        </div>
        <div class="input-item">
            <span class="item-tip">物料编码:</span>
            <el-input v-model="fieldInput.metailCode" placeholder="请输入物料编码" size="mini" class="item-input"></el-input>
        </div>
        <div class="input-item">
            <span class="item-tip">工序名称:</span>
            <el-input v-model="fieldInput.processName" placeholder="请输入工序名称" size="mini" class="item-input"></el-input>
        </div>
        <div class="input-item">
            <span class="item-tip">报工时间:</span>
            <el-time-picker v-model="fieldInput.reportedTime" :picker-options="{ selectableRange:'00:00:00 - 23:59:59'}" placeholder="请选择时间段" size="mini" class="item-input"></el-time-picker>
        </div>
      </div>
      <div class="btns">
        <el-button type="primary" size="small">查询</el-button>
        <el-button type="primary" size="small">导出</el-button>
      </div>
      <div class="table">
        <el-table data="" style="width: 100%">
            <el-table-column prop="" label="订单编号" width="180"></el-table-column>
            <el-table-column prop="" label="订单数量" width=""></el-table-column>
            <el-table-column prop="" label="报工时间" width=""></el-table-column>
            <el-table-column prop="" label="产品编码" width=""></el-table-column>
            <el-table-column prop="" label="产品名称" width=""></el-table-column>
            <el-table-column prop="" label="线体" width=""></el-table-column>
            <el-table-column prop="" label="工序名称" width=""></el-table-column>
            <el-table-column prop="" label="不良数量" width=""></el-table-column>
            <el-table-column prop="" label="不良率" width=""></el-table-column>
            <el-table-column prop="" label="下油不良" width=""></el-table-column>
            <el-table-column prop="" label="零件坏" width=""></el-table-column>
        </el-table>
      </div>
      <div class="tools">
        <el-button size="mini">上一页</el-button>
        <span class="tools-number">2/5</span>
        <el-button size="mini">下一页</el-button>
      </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //input输入收集
            fieldInput:{
                defactName:'',  //缺陷名称
                orderNnumber:'',
                lineCode:'',
                lineCodes:[{label:"1号线",value:'1'},{label:'2号线',value:'2'}],
                metailName:'',
                metailCode:'',
                processName:'',
                reportedTime:'',  //报工时间
            },
            //表格数据
            defactTable:{}
        }
    }
}
</script>

<style lang='scss' scoped>
.reportForms{
    width: 100vw;
    height: 100vh;
    padding: 20px 10px;
    user-select: none;
    .inputs{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .input-item{
            margin: 5px 0;
            width: 30%;
            display: flex;
            align-items: center;
            .item-tip{
                width: 6vw;
                text-align: right;
                font-size: 1vw;
                margin-right: 1vw;
            }
            .item-input{
                width: 50%;
            }
        }
    }
    .btns{
        margin: 10px 0;
    }
    .tools{
        width: 100%;
        margin: 5px 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .tools-number{
            margin: 0 7px;
            color: #9195a3;
            font-size: 12px;
        }
    }
}
</style>